<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      /* body{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width:100vw;
      overflow: hidden;
    } */

      svg {
        border: 2px solid black;
      }
    </style>
  </head>

  <body>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
      <!-- 定义一个蓝色的圆形 -->
      <!-- whenNotActive 不在运动状态才会重新开始 always never -->
      <circle cx="100" cy="100" r="50" fill="blue">
        <animate attributeName="cx" from="50" to="350" dur="3s" begin="2s;click" fill="freeze" restart="whenNotActive" />
      </circle>
    </svg>
  </body>
</html>
